<template>
  <div>
    <el-row class="card" :gutter="22">
      <el-col
        v-for="(item, index) in dataList"
        :key="index"
        :xs="6"
        :sm="6"
        :md="6"
        :lg="6"
        :xl="6"
        style="margin-bottom: 18px"
      >
        <div class="card-item" @click="linkTo('company', item.id)">
          <div class="item-top">
            <img
              v-if="item.companyLogo"
              :src="item.companyLogo"
              alt=""
              class="top-img"
            />
            <img
              v-if="!item.companyLogo"
              src="@/assets/images/search-icon.png"
              alt=""
              class="top-img"
            />
            <div class="item-msg">
              <span class="msg-title">{{
                item.companyShortName || item.companyName
              }}</span>
              <span class="msg-text">{{ item.industry }}</span>
            </div>
          </div>
          <div class="item-bottom" v-if="item.companyJobDOList">
            <div class="noDate" v-if="item.companyJobDOList.length <= 0">
              --暂无招聘职位--
            </div>
            <div
              v-else
              class="item-list"
              v-for="(it, i) in item.companyJobDOList"
              :key="i"
            >
              <span class="list-title">{{ it.jobName }}</span>
              <span class="list-text">{{ it.city }}</span>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <div class="main_row_wrapper">
      <div class="list_wrapper">
        <div
          class="list-swiper-slide"
        >
          <div
            class="item"
            v-for="(it, i) in dataList"
            :key="i"
            @click="linkTo('company', it.id)"
          >
          <div class="company_content">
              <img v-if="it.companyLogo" :src="it.companyLogo" class="logo" />
               <img
                v-if="!it.companyLogo"
                src="@/assets/images/search-icon.png"
                alt=""
                class="logo"
              />
              <div class="company_info">
                <div class="name">{{ it.companyName }}</div>
                <div class="industry">{{ it.industry }}</div>
              </div>
          </div>
          <div class="line"></div>
            <div class="item_bot">
              <div class="nodata" v-if="it.companyJobDOList.length <= 0">
                --暂无更多职位--
              </div>
              <div
                class="rows"
                v-for="(t, j) in it.companyJobDOList"
                :key="j"
              >
                <span class="jobName">{{ t.jobName }}</span>
                <span class="city">{{ t.city }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
</template>

<script>
export default {
  // 组件名称
  name: "search",
  // 组件参数 接收来自父组件的数据
  props: {
    dataList: Array,
  },
  // 局部注册的组件
  components: {},
  // 组件状态值
  data() {
    return {};
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  created() {
    console.log(this.dataList)
  },
  // 组件方法
  methods: {
    linkTo(routeName, id) {
      this.$router.push({ name: routeName, query: { id } });
    },
  },
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.main_row_wrapper{
  display: none;
}
.card {
  display: block;
  // display: grid;
  // grid-template-columns: repeat(auto-fill, 384px);
  // grid-gap:24px;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  .card-item {
    // height: 303px;
    background: #ffffff;
    border-radius: 6px;
    border: 1px solid #d4d6da;
    position: relative;
    height: 215px;
    padding: 22px 20px;
    cursor: pointer;
    .item-top {
      display: flex;
      align-items: center;
      width: 100%;
      overflow: hidden;
      .top-img {
        width: 63px;
        height: 63px;
        border-radius: 6px;
      }
      .item-msg {
        display: flex;
        flex-direction: column;
        margin-left: 18px;
        flex: 1;
        overflow: hidden;
        .msg-title {
          font-size: 19px;
          font-weight: 600;
          color: #37383d;
          line-height: 40px;
          height: 40px;
          flex: 1;
          width: 100%;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        }
        .msg-text {
          font-size: 13px;
          color: #9597a0;
          line-height: 20px;
        }
      }
    }
    .item-bottom {
      margin-top: 14px;
      border-top: 0.5px dashed #9597a0;
      padding-top: 14px;
      height: 110px;
      position: relative;
      display: flex;
      flex-flow: column nowrap;
      justify-content: flex-start;
      align-items: flex-start;
      .noDate {
        position: absolute;
        left: 0;
        width: 100%;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        justify-content: center;
        align-items: center;
        color: #9597a0;
      }
      .item-list {
        width: 100%;
        margin-bottom: 12px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .list-title {
          font-size: 15px;
          max-width: 180px;
          color: #37383d;
          line-height: 30px;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        }
        .list-text {
          font-size: 15px;
          color: #9597a0;
          line-height: 28px;
        }
      }
    }
  }
}
@media screen and (max-width: 480px) {
  .card{
    display: none;
  }
  .main_row_wrapper {
      display: inline-block;
      width: 100%;
      padding: 15px 0;
      // height: 580px;
      overflow: hidden;
      .list-swiper-slide {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        width: 100%;
        padding: 0 10px;
        // &.list-swiper-slide::after {
        //     content: '';
        //     flex: 1;    /* 或者flex: 1 */
        // }
        // padding: 0 30px;
        // height: 520px;
      }
      .item {
        // width: calc((100% - 40px) / 3);
        width: 48%;
        // height: 170px;
        border: 1px solid #ebebeb;
        // background: linear-gradient(148deg, #d2e4f9 0%, #fafbfb 64%);
        box-shadow: none;
        border-radius: 4px;
        margin-bottom: 11px;
        transition-duration: 0.3s;
        font-family: MicrosoftYaHei;
        cursor: pointer;
        overflow: hidden;
        .company_content{
          display: flex;
          padding: 20px 0px 15px  12px;
          .logo {
            // position: absolute;
            width: 50px;
            height: 50px;
            border-radius: 10px;
            left: 50%;
            // transform: translateX(-50%);
            top: 20px;
          }
          .company_info{
            padding: 0 0px 0 10px;
            .name {
              width: 80px;
              
              font-size: 16px;
              font-weight: bold;
              color: #000;
              line-height: 21px;
              margin-bottom: 10px;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              // text-align: center;
              transition-duration: 0.3s;
            }
            &:hover .name {
              color: #15389a;
            }
            .industry {
              font-size: 15px;
              line-height: 16px;
              font-weight: 400;
              color: #999999;
              // text-align: center;
            }
          }
        }
       
        .line{
          // width: 100%;
          height: 0.5px;
          margin: 0 10px;
          border-bottom: 0.5px dashed #9597A0;
        }
        .item_bot {
          width: 100%;
          // position: absolute;
          left: 0;
          bottom: 0;
          // height: 78px;
          background: #fff;
          padding: 15px 10px;
          font-family: MicrosoftYaHeiLight;
          font-weight: 400;
          font-size: 13px;
          line-height: 14px;
          display: flex;
          flex-wrap: wrap;
          align-content: space-between;
          .nodata {
            // position: absolute;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            // left: 0;
            // top: 50%;
            transform: none;
            color: #9597a0;
          }
          .rows {
            width: 100%;
            display: flex;
            justify-content: space-between;
            flex-wrap: nowrap;
            margin-bottom: 0.15rem;
            &.rows:last-child{
            margin-bottom: 0;
            }
            .jobName {
              color: #000000;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              max-width: 1rem;
            }
            .city {
              color: #999999;
            }
          }
        }
       
        &:hover {
          // box-shadow: 0px 0px 25px 2px rgba(124, 124, 124, 0.41);
          box-shadow: none;
          // transform: scale(1.02);
          transform: none;
        }
      }
    }
    
}
</style>
